<template>
  <base-page v-bind="baseInfo">
    <template #searchBar>
      <filter-form
        ref="filterForm"
        :elements="elements"
        :hand="true"
        class="filter"
        @submit="submit"
        @reset="reset"
      >
        <template>
          <el-button icon="el-icon-download" @click="downloadTemplateFun">导出</el-button>
        </template>
      </filter-form>
    </template>

    <template #content>
      <el-tabs v-model="activeName">
        <el-tab-pane label="业务职能" name="business" />
        <el-tab-pane label="管理职能" name="manage" />
      </el-tabs>

      <div class="table-box">
        <TableNew
          v-show="activeName === 'business'"
          :loading="tableLoading"
          :data="tableData"
          :columns="businessColumns"
          :pagination="pagination"
          :cell-style="cellStyle"
          @paginationChange="paginationChange"
        />

        <TableNew
          v-show="activeName === 'manage'"
          :loading="tableLoading"
          :data="tableData"
          :columns="manageColumns"
          :pagination="pagination"
          :cell-style="cellStyle"
          :span-method="objectSpanMethod"
          @paginationChange="paginationChange"
        />
      </div>
    </template>
  </base-page>
</template>

<script>
import { getQuarter } from '@/utils/publicFun'
import {
  exportExcelYsBusinessResults, exportExcelYsManageResults,
  listYsBusinessResults,
  listYsDepartment, listYsDictionary,
  listYsManageResults
} from '@/api/budgetQuert'
import listMixins from '@/mixins/budgetQuert/listMixins'
import exportDownload from '@/mixins/budgetQuert/exportDownload'

export default {
  name: 'DepartmentResult', // 部门预算执行结果
  mixins: [listMixins, exportDownload],
  data() {
    return {
      baseInfo: {
        searchBarShow: true
      },

      name: '部门预算执行管理-',
      exportName: '',
      reconstruction: true,

      elements: [],
      elementsBusiness: [
        {
          label: '期间',
          type: 'date-picker',
          mode: 'monthrange',
          format: 'yyyy-MM',
          key: 'date',
          value: ''
        },
        {
          label: '预算科目名称',
          type: 'input',
          key: 'subjectName',
          value: '',
          width: 140
        }
        // {
        //   label: '部门',
        //   type: 'select',
        //   options: [],
        //   key: 'departmentCode',
        //   itemValue: 'departmentCode',
        //   itemLabel: 'departmentName',
        //   value: ''
        // }
      ],
      elementsManage: [
        {
          label: '类别',
          type: 'select',
          options: [],
          hideSelectAll: true,
          key: 'subjectType',
          itemValue: 'id',
          itemLabel: 'dictionaryName',
          value: ''
        }
      ],

      activeName: '',
      businessColumns: [
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 100
        },
        {
          title: '预算下达',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(元)',
              dataIndex: 'xsan',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(元)',
              dataIndex: 'xxu',
              format: true,
              align: 'right'
            },
            {
              title: '合计(元)',
              dataIndex: 'xall',
              format: true,
              align: 'right'
            }
          ]
        },
        {
          title: '预算执行',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(元)',
              dataIndex: 'zsan',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(元)',
              dataIndex: 'zxu',
              format: true,
              align: 'right'
            },
            {
              title: '合计(元)',
              dataIndex: 'zall',
              format: true,
              align: 'right'
            }
          ]
        },
        // {
        //   title: '余额',
        //   type: 'hasMerge',
        //   mergeList: [
        //     {
        //       title: '三香(元)',
        //       dataIndex: 'ysan',
        //       format: true,
        //       align: 'right'
        //     },
        //     {
        //       title: '浒关(元)',
        //       dataIndex: 'yxu',
        //       format: true,
        //       align: 'right'
        //     },
        //     {
        //       title: '合计(元)',
        //       dataIndex: 'yall',
        //       format: true,
        //       align: 'right'
        //     }
        //   ]
        // },
        {
          title: '预算执行率',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(%)',
              dataIndex: 'sanM',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(%)',
              dataIndex: 'xuM',
              format: true,
              align: 'right'
            },
            {
              title: '合计(%)',
              dataIndex: 'allM',
              format: true,
              align: 'right'
            }
          ]
        },
        {
          title: '全年预算执行率',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(%)',
              dataIndex: 'sanY',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(%)',
              dataIndex: 'xuY',
              format: true,
              align: 'right'
            },
            {
              title: '合计(%)',
              dataIndex: 'allY',
              format: true,
              align: 'right'
            }
          ]
        }
        // {
        //   title: '执行误差率考核得分',
        //   dataIndex: 'divide',
        //   width: 90,
        //   format: true,
        //   align: 'right'
        // }
      ],
      manageColumns: [
        // {
        //   title: '预算类别',
        //   dataIndex: 'budgetCategory',
        //   width: 100
        // },
        {
          title: '类别',
          dataIndex: 'category',
          width: 80,
          fixed: 'left'
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 120,
          fixed: 'left'
        },
        {
          title: '预算部门名称',
          dataIndex: 'deptNames',
          width: 120,
          fixed: 'left'
        },
        {
          title: '预算下达',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(元)',
              dataIndex: 'xsan',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(元)',
              dataIndex: 'xxu',
              format: true,
              align: 'right'
            },
            {
              title: '合计(元)',
              dataIndex: 'xall',
              format: true,
              align: 'right'
            }
          ]
        },
        {
          title: '预算执行',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(元)',
              dataIndex: 'zsan',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(元)',
              dataIndex: 'zxu',
              format: true,
              align: 'right'
            },
            {
              title: '合计(元)',
              dataIndex: 'zall',
              format: true,
              align: 'right'
            }
          ]
        },
        // {
        //   title: '余额',
        //   type: 'hasMerge',
        //   mergeList: [
        //     {
        //       title: '三香(元)',
        //       dataIndex: 'ysan',
        //       format: true,
        //       align: 'right'
        //     },
        //     {
        //       title: '浒关(元)',
        //       dataIndex: 'yxu',
        //       format: true,
        //       align: 'right'
        //     },
        //     {
        //       title: '合计(元)',
        //       dataIndex: 'yall',
        //       format: true,
        //       align: 'right'
        //     }
        //   ]
        // },
        {
          title: '预算执行率',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(%)',
              dataIndex: 'sanM',
              format: true,
              align: 'right',
              width: 80
            },
            {
              title: '浒关(%)',
              dataIndex: 'xuM',
              format: true,
              align: 'right',
              width: 80
            },
            {
              title: '合计(%)',
              dataIndex: 'allM',
              format: true,
              align: 'right'
            }
          ]
        },
        {
          title: '全年预算执行率',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(%)',
              dataIndex: 'sanY',
              format: true,
              align: 'right',
              width: 80
            },
            {
              title: '浒关(%)',
              dataIndex: 'xuY',
              format: true,
              align: 'right',
              width: 80
            },
            {
              title: '合计(%)',
              dataIndex: 'allY',
              format: true,
              align: 'right'
            }
          ]
        },
        {
          title: '预算总执行率',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(%)',
              dataIndex: 'sanTotalRate',
              format: true,
              align: 'right',
              width: 80
            },
            {
              title: '浒关(%)',
              dataIndex: 'xuTotalRate',
              format: true,
              align: 'right',
              width: 80
            },
            {
              title: '合计(%)',
              dataIndex: 'allTotalRate',
              format: true,
              align: 'right'
            }
          ]
        }

        // {
        //   title: '执行误差率考核得分',
        //   dataIndex: 'divide',
        //   width: 90,
        //   format: true,
        //   align: 'right'
        // },
        // {
        //   title: '执行误差率考核总分',
        //   dataIndex: 'divideAll',
        //   width: 90,
        //   format: true,
        //   align: 'right'
        // }
      ],
      tableData: []
    }
  },
  computed: {
    params() {
      return this.$refs.filterForm.getParms()
    }
  },
  watch: {
    async activeName(val) {
      this.baseInfo.searchBarShow = false
      if (val === 'business') {
        this.elements = this.elementsBusiness
        const quarter = getQuarter('YYYY-MM')
        this.elements[0].value = [quarter.startTime, quarter.endTime]
        // await this.listYsDepartmentFun(1)
        this.$nextTick(() => {
          this.listInterface = listYsBusinessResults
        })
        this.downloadInterface = exportExcelYsBusinessResults
        this.exportName = '业务职能'
      } else {
        this.elements = [...this.elementsBusiness, ...this.elementsManage]
        const quarter = getQuarter('YYYY-MM')
        this.elements[0].value = [quarter.startTime, quarter.endTime]
        // await this.listYsDepartmentFun(0)
        this.listInterface = listYsManageResults
        this.downloadInterface = exportExcelYsManageResults
        this.exportName = '管理职能'
      }

      setTimeout(() => {
        this.baseInfo.searchBarShow = true
      })

      // this.listInterface = val === 'business' ? listYsBusinessResults : listYsManageResults
      // this.downloadInterface = val === 'business' ? exportExcelYsBusinessResults : exportExcelYsManageResults
      // this.exportName = val === 'business' ? '业务职能' : '管理职能'
      this.$refs.filterForm && this.$refs.filterForm.submitFormFilter()
    }
  },
  mounted() {
    this.activeName = 'business'

    this.$nextTick(() => {
      const quarter = getQuarter('YYYY-MM')
      this.elements[0].value = [quarter.startTime, quarter.endTime]

      this.listYsDictionaryFun()
    })
  },
  methods: {
    reset() {
      const quarter = getQuarter('YYYY-MM')
      this.$refs.filterForm.handleForceSet({
        date: [quarter.startTime, quarter.endTime],
        subjectName: '',
        departmentCode: '',
        subjectType: ''
      })
      this.getData()
    },

    async listYsDepartmentFun(type) {
      await listYsDepartment({ status: type === 1 ? 1 : null, manageStatus: type === 1 ? null : 1 }).then(res => {
        if (res.code === 200) {
          this.elements[2].options = res.data
          this.$refs.filterForm && this.$refs.filterForm.submitFormFilter()
        }
      })
    },

    listYsDictionaryFun() {
      listYsDictionary({ selectType: 'subjectType' }).then(res => {
        if (res.code === 200) {
          this.elementsManage[0].options = res.data
        } else {
          this.$message.error('获取数据失败')
        }
      })
    },

    downloadTemplateFun() {
      const param = this.$refs.filterForm.getParms()

      if (param && param.date) {
        param.startTime = param.date[0]
        param.endTime = param.date[1]

        delete param.date
      }

      this.downloadTemplate(param, this.exportName)
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 15) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        }
      }

      if (columnIndex === 16) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        }
      }

      if (columnIndex === 17) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        }
      }
    },

    dataReconstruction(res) {
      const data = res.data.list
      if (this.activeName === 'manage') {
        let pos = 0
        const rowspanArr = []

        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            rowspanArr.push(1)
          } else if (data[i].categoryId === (data[i - 1] && data[i - 1].categoryId)) {
            rowspanArr[pos] += 1
            rowspanArr.push(0)
          } else {
            rowspanArr.push(1)
            pos = i
          }
        }

        for (let i = 0; i < data.length; i++) {
          data[i].rowspan = rowspanArr[i]
        }
      }

      for (let i = 0; i < data.length; i++) {
        for (const key in data[i]) {
          if (key + 'Flag' in data[i] && !!data[i][key + 'Flag']) {
            data[i][key] = '#'
          }
        }
      }

      this.tableData = data
      this.pagination.total = res.data.total
    },

    cellStyle(row) {
      if (row.column.property in row.row && row.row[row.column.property] === '#') {
        return 'color: #FF0000'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.filter{
  min-height: 35px;
}
</style>
